<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | User Profile</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- DataTables -->
  <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">

  <!-- Theme style -->
  <link rel="stylesheet" href="./css/adminlte.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" href="index.html">
          <i class="fa fa-paper-plane"></i>
          <span>博客前台首页</span>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <h1>
      <a href="index.html" class="brand-link">
        <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
        <span class="brand-text font-weight-light">ZengZK's Blog</span>
      </a>
    </h1>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-header">仪表盘</li>
          <li class="nav-item">
            <a href="dashboard.html" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>仪表盘</p>
            </a>
          </li>
          <li class="nav-header">博客编辑</li>
          <li class="nav-item">
            <a href="edit.html" class="nav-link">
              <i class="nav-icon fas fa-edit"></i>
              <p>发布博客</p>
            </a>
          </li>
          <li class="nav-header">管理模块</li>
          <li class="nav-item">
            <a href="blog-mgr.html" class="nav-link active">
              <i class="fa fa-list-alt nav-icon" aria-hidden="true"></i>
              <p>博客管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="category-mgr.html" class="nav-link">
              <i class="fa fa-bookmark nav-icon" aria-hidden="true"></i>
              <p>分类管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="tag-mgr.html" class="nav-link">
              <i class="fa fa-tags nav-icon" aria-hidden="true"></i>
              <p>标签管理</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="comment-mgr.html" class="nav-link">
              <i class="fa fa-comments nav-icon" aria-hidden="true"></i>
              <p>评论管理</p>
            </a>
          </li>
          <li class="nav-header">系统管理</li>
          <li class="nav-item">
            <a href="configuration.html"
               class="nav-link">
              <i class="fa fa-wrench nav-icon"></i>
              <p>系统配置</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="index.html" class="nav-link">
              <i class="fa fa-sign-out-alt nav-icon"></i>
              <p>安全退出</p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper mt-3">
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card card-teal card-outline">
              <div class="card-header">
                <h3 class="card-title">博客列表</h3>
              </div>
              <div class="card-body">

              </div>
              <hr class="m-0">
              <!-- /.card-header -->
              <div class="card-body table-responsive">
                <table id="testTable" class="table table-bordered table-hover text-nowrap">
                  <thead>
                  <tr>
                    <th><input type="checkbox" value="' + data + '" name="id"/></th>
                    <th>标题</th>
                    <th>分类</th>
                    <th>发布</th>
                    <th>浏览量</th>
                    <th>发布时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>

      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <p class="text-center mb-1">
      Copyright © 2020 ZengZK Designed by ZengZK Powered by AdminLTE
    </p>
    <p class="text-center">
      <a href="">粤ICP备20040058号</a>
    </p>
  </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- DataTables -->
<script src="./plugins/datatables/jquery.dataTables.min.js"></script>
<script src="./plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="./plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="./plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>


<!-- AdminLTE App -->
<script src="./js/adminlte.min.js"></script>

<script>
  $(function () {
    $('#testTable').DataTable({
      ajax: './data/blog.json', // 从一个ajax数据源读取数据给表格内容
      lengthMenu: [10, 20, 30, 60], // 定义在每页显示记录数的select中显示的选项
      // displayLength: 20, //
      // displayStart: 1, //初始化显示的时候从第几条数据开始显示(一开始显示第几页)
      // lengthChange: false, // 是否允许用户改变表格每页显示的记录数
      searching: false,
      responsive: false,
      // info: false,
      processing: true, // 是否显示处理状态
      // serverSide: true, // 是否开启服务器模式
      autoWidth: false, // 控制Datatables是否自适应宽度
      deferRender: true, // 控制Datatables的延迟渲染，可以提高初始化的速度
      stateSave: true, //保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
      // dom: '<"top"i>rt<ip>',
      dom: '<"row"<"col-md-12"<"float-left"l><"#topPlugin.float-right">>>irt<"mt-3 pagination-sm"p>',
      initComplete: renderTopPlugin, // 初始化结束后的回调函数
      ordering: false,
      columns: [
        {
          data: "blogId",
          render: function (data, type, row, meta) {
            return '<input type="checkbox" value="' + data + '" name="id"/>';
          }
        },
        {data: "blogTitle"},
        {data: "blogCategoryName"},
        {
          data: "blogStatus",
          render: function (data, type, row, meta) {
            if (data === 1) {
              data = '<div class="custom-control custom-switch custom-switch-on-success"><input type="checkbox" id="customSwitch' + row.blogId + '" class="custom-control-input" checked><label class="custom-control-label" for="customSwitch' + row.blogId + '"></label></div>';
            } else {
              data = '<div class="custom-control custom-switch custom-switch-on-success"><input type="checkbox" id="customSwitch' + row.blogId + '" class="custom-control-input"><label class="custom-control-label" for="customSwitch' + row.blogId + '"></label></div>';
            }
            return data;
          }
        },
        {data: "blogViews"},
        {data: "createTime"},
        {data: "updateTime"},
        {
          render: function (data, type, row, meta) {
            return '<button class="btn btn-danger btn-xs">删除</button> <button class="btn btn-success btn-xs">修改</button>'
          }
        }
      ],
      language: { // 国际化配置
        decimal: "",
        emptyTable: "表格为空",
        info: "显示从_START_到_END_条记录 (总记录数为_TOTAL_条)",
        infoEmpty: "记录数为0",
        infoFiltered: "(从_MAX_条记录过滤)",
        infoPostFix: "",
        thousands: ",",
        lengthMenu: "显示 _MENU_ 条",
        loadingRecords: "Loading...",
        processing: "正在获取数据，请稍后...",
        sSearch: "搜索",
        zeroRecords: "没有找到数据",
        paginate: {
          previous: "上一页",
          first: "第一页",
          next: "下一页",
          last: "最后一页"
        }
      },
    });

    /**
     * 表格加载渲染完毕后执行的方法
     * @param data
     */
    function renderTopPlugin(data) {
      //上方topPlugin DIV中追加HTML
      //var topPlugin='<button id="addButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addUser" style="display:block;">' +
      // '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加用户</button>';
      //删除用户按钮的HTMLDOM
      var topPlugin = '<button class="btn btn-danger btn-sm">批量删除</button> <button class="btn btn-primary btn-sm">新增</button> <button class="btn btn-info btn-sm">导出全部</button>';
      $("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
      //$("#expCsv").on("click", exp1);//给下方按钮绑定事件
    }
  });
</script>

</body>
</html>
